<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">各个烘筒温度</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config"/>
      </div>
    </div>
  </div>
</template>

<script>
    import {updateData} from "../../api/system/dict/data";

    export default {
        props:{
            curMachine:{
                type: Object,
            }
        },

        data() {
            return {
                config: {}
            }
        },
        components: {},
        mounted() {
        },
        watch:{
          curMachine:{
              handler(curMachine, oldVal){
                  this.updateData()
              }
          }
        },
        created(){
            this.updateData()
        },

        methods: {
            calTemMean(val){
                let m = (this.curMachine.tDry1 + this.curMachine.tDry2 + this.curMachine.tDry3 + this.curMachine.tDry4 + this.curMachine.tDry5 + this.curMachine.tDry6 + this.curMachine.tDry7 + this.curMachine.tDry8 + this.curMachine.tDry9 + this.curMachine.tDry10 + this.curMachine.tDry11 + this.curMachine.tDry12 + this.curMachine.tDry13 + this.curMachine.tDry14)/14;
                let dif = (Math.round(val - m))/10;

                if (dif>0){
                    return "<span  class='colorGrass'>↑"+ dif +"℃</span>"
                }
                else{
                    return "<span  class='colorRed'>↓"+ (-dif) +"℃</span>"
                }


            },

            updateData(){
              this.config = {
                  header: ['烘筒名', '温度值', '温度差'],
                  data: [
                      ['烘筒1', this.curMachine.tDry1/10 + "℃", this.calTemMean(this.curMachine.tDry1)],
                      ['烘筒2', this.curMachine.tDry2/10 + "℃", this.calTemMean(this.curMachine.tDry2)],
                      ['烘筒3', this.curMachine.tDry3/10 + "℃", this.calTemMean(this.curMachine.tDry3)],
                      ['烘筒4', this.curMachine.tDry4/10 + "℃", this.calTemMean(this.curMachine.tDry4)],
                      ['烘筒5', this.curMachine.tDry5/10 + "℃", this.calTemMean(this.curMachine.tDry5)],
                      ['烘筒6', this.curMachine.tDry6/10 + "℃", this.calTemMean(this.curMachine.tDry6)],
                      ['烘筒7', this.curMachine.tDry7/10 + "℃", this.calTemMean(this.curMachine.tDry7)],
                      ['烘筒8', this.curMachine.tDry8/10 + "℃", this.calTemMean(this.curMachine.tDry8)],
                      ['烘筒9', this.curMachine.tDry9/10 + "℃", this.calTemMean(this.curMachine.tDry9)],
                      ['烘筒10', this.curMachine.tDry10/10 + "℃", this.calTemMean(this.curMachine.tDry10)],
                      ['烘筒11', this.curMachine.tDry11/10 + "℃", this.calTemMean(this.curMachine.tDry11)],
                      ['烘筒12', this.curMachine.tDry12/10 + "℃", this.calTemMean(this.curMachine.tDry12)],
                      ['烘筒13', this.curMachine.tDry13/10 + "℃", this.calTemMean(this.curMachine.tDry13)],
                      ['烘筒14', this.curMachine.tDry14/10 + "℃", this.calTemMean(this.curMachine.tDry14)],

                  ],
                  rowNum: 7, //表格行数
                  headerHeight: 35,
                  headerBGC: '#0f1325', //表头
                  oddRowBGC: '#0f1325', //奇数行
                  evenRowBGC: '#171c33', //偶数行
                  index: true,
                  columnWidth: [50],
                  align: ['center']
              }
            },


        }
    }
</script>

<style lang="scss" scoped>
  $box-height: 410px;
  $box-width: 300px;
  #centerRight1 {
    padding: 16px;
    padding-top: 20px;
    height: $box-height;
    width: $box-width;
    border-radius: 5px;

    .bg-color-black {
      height: $box-height - 30px;
      border-radius: 10px;
    }

    .text {
      color: #c3cbde;
    }

    .body-box {
      border-radius: 10px;
      overflow: hidden;

      .dv-scr-board {
        width: 270px;
        height: 340px;
      }
    }
  }
</style>
